<template>
<div id="user-add">
  <!--pages/customerNote/customerNote.wxml-->
  <view id="customer-note">
    <view class="cell-title" v-if="!isPersonal">
      用户名
    </view>
    <van-cell-group v-if="!isPersonal">
      <van-field :value="form.name" placeholder="请输入用户名"  clearable @change="changeForm" data-name="name">
      </van-field>
    </van-cell-group>
    <view class="cell-title">
      微信号
    </view>
    <van-cell-group>
      <van-field :value="form.wechat" placeholder="请输入微信号"  @change="changeForm" clearable data-name="wechat">
      </van-field>
    </van-cell-group>
    <view class="cell-title">
      性别
    </view>
    <van-cell-group>
      <van-field :value="form.gender" placeholder="请选择性别"  clearable data-name="gender" @focus="showPop" data-index="1">
      </van-field>
      <uni-popup ref="popup" type="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          data-index="1"
          @cancel="showOrHidePicker"
          @confirm="confirmSelectType"
      />
      </uni-popup>
    </van-cell-group>
    <view class="cell-title">
      所属单位
    </view>
    <van-cell-group>
      <van-field :value="form.home" placeholder="请选择所在单位"  clearable data-name="home" @focus="showPop" data-index="2">
      </van-field>
      <uni-popup ref="popup-home" type="bottom">
        <van-picker
            show-toolbar
            :columns="companyColumns"
            data-index="2"
            @cancel="showOrHidePicker"
            @confirm="confirmSelectType"
        />
      </uni-popup>
    </van-cell-group>
    <view class="cell-title">
      用户头像
    </view>
    <van-field :value="form.avatarUrl" placeholder="请输入用户头像地址"  clearable data-name="avatarUrl">
    </van-field>
    <view class="button-area">
      <van-button class="tag-btn" round @click="cancelPage">
        取消
      </van-button>
      <van-button type="primary" class="tag-btn" round :loading="loading" @click="submitForm" loading-text="保存中...">
        确定
      </van-button>
    </view>
  </view>
</div>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue'
import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
import { formValidate, goCancel } from "@/static/utils";
import {reqCompanyList, reqUpdateUser} from "../../api/user";

export default {
  name: "useAdd",
  data () {
    return {
      form: {
        name: '',
        wechat: '',
        home: '',
        gender: '',
        avatarUrl: ''
      },
      loading: false,
      showSex: true,
      isPersonal: false,
      columns: ['男', '女'],
      fileList: [],
      companyList: [],
      companyColumns: []
    }
  },
  components: {
    uniPopup,
    uniPopupMessage,
    uniPopupDialog
  },
  methods: {
    changeForm (e) {
      const name = e.currentTarget.dataset.name;
      this.form[name] = e.detail;
    },
    confirmSelectType (e) {
      const { value } = e.detail;
      const index = e.currentTarget.dataset.index;

      if (index === '1'){
        this.form.gender = value;
        this.$refs.popup.close()
      } else {
        this.form.home = value;
        this.$refs['popup-home'].close()
      }
    },
    showOrHidePicker (e) {
      const index = e.currentTarget.dataset.index;

      if (index === '1'){
        this.$refs.popup.close()
      } else {
        this.$refs['popup-home'].close()
      }
    },
    onClose () {
      this.$refs.popup.close()
    },
    afterRead (e) {
      console.log(e, 888)
      const { file } = e.detail;
      const that = this;
      // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
      uni.uploadFile({
        url: 'https://example.weixin.qq.com/upload', // 仅为示例，非真实的接口地址
        filePath: file.url,
        name: 'file',
        formData: { user: 'test' },
        success(res) {
          // 上传完成需要更新 fileList
          const { fileList = [] } = that;
          fileList.push({ ...file, url: res.data });
        },
      })
    },
    showPop (e) {
      const index = e.currentTarget.dataset.index;

      if (index === '1'){
        this.$refs.popup.open()
      } else {
        this.$refs['popup-home'].open()
      }
    },
    async getCompanyList () {
      const result = await reqCompanyList({
        offset: 0,
        limit: 999
      })
      const { list } = result.data.messageBody

      this.companyList = list;
      this.companyColumns = list.map(item => item.name);
    },
    submitForm () {
      const formData = [{
        name: 'name',
        label: '用户名'
      }, {
        name: 'gender',
        label: '性别'
      }, {
        name: 'home',
        label: '所属单位'
      }, {
        name: 'avatarUrl',
        label: '用户头像地址'
      }];
      var flag = formValidate(this.form, formData, 'required')

      if (!flag){
        return false;
      }
      reqUpdateUser({
        id: this.$store.state.user.userDetail.id,
        nickName: this.form.name,
        avatarUrl: this.form.avatarUrl,
        wechatCode: this.form.wechat,
        company: this.companyList.filter(item => item.name === this.form.home)[0].id,
        gender: this.form.gender === '男' ? 0 : 1
      }).then(() => {
        uni.showToast({
          title: '更新用户成功!',
          icon: 'success'
        })
        setTimeout(() => {
          uni.navigateBack({
            delta: 2
          })
        }, 1500)
      })
    },
    cancelPage () {
      goCancel()
    }
  },
  onLoad: async function (option){
    this.isPersonal = !!option.personal
    uni.setNavigationBarTitle({
      title: '编辑个人信息'
    })
      await this.getCompanyList();
      this.form.name = this.$store.state.user.userDetail.nickName;
      this.form.avatarUrl = this.$store.state.user.userDetail.avatarUrl;
      this.form.wechat = this.$store.state.user.userDetail.wechatCode;
      this.form.home = this.companyList.filter(item => item.id === this.$store.state.user.userDetail.company)[0].name;
      this.form.gender = this.$store.state.user.userDetail.gender === 0 ? '男' : '女';
  }
}
</script>

<style lang="less">
/* pages/customerNote/customerNote.wxss */
#customer-note {
  background: #F2F2F2;
  .van-hairline, .van-hairline--bottom, .van-hairline--left, .van-hairline--right, .van-hairline--surround, .van-hairline--top, .van-hairline--top-bottom{
    background: #ffffff;
  }
}
#customer-note  .van-field__body--textarea.van-field__body--ios {
  margin-top: 0;
}
#customer-note .cell-title {
  padding: 0.3rem 0.5rem;
  text-align: left;
  font-size: 28rpx;
  color: #828283;
}
#customer-note .save-btn {
  padding: 0.8rem 0.6rem;
}
#customer-note .button-area {
  padding: 0.4rem 0;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  background: #FFFFFF;
  box-shadow: 0px 0px 1px 0px #333333;
  position: fixed;
  bottom: 0;
}
#customer-note .button-area .tag-btn {
  margin: 0 0.6rem;
  border-radius: 4px;
}

#customer-note .button-area .van-button{
  width: 300rpx !important;
}
#customer-note .button-area .van-button--primary {
  background: #4791F4;
  border: 1px solid #4791F4;
}
/*# sourceMappingURL=home.css.map */
</style>